<template>
	<e-transition :show="props.loading" :custom-style="{
            position: 'fixed',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            backgroundColor: props.bgColor,
            display: 'flex',
			zIndex: props.zIndex,
        }">
		<view class="e-loading-page">
			<view class="e-loading-page__warpper">
				<view class="e-loading-page__warpper__loading-icon">
					<slot name="icon">
						<image v-if="props.image" :src="props.image" class="e-loading-page__warpper__loading-icon__img"
							mode="widthFit" :style="{
								width: addUnit(props.iconSize),
							    height: addUnit(props.iconSize)
							}"></image>
						<e-loading-icon  v-else show :mode="props.loadingMode" :size="addUnit(props.iconSize)"
							:color="props.loadingColor"></e-loading-icon>
					</slot>
					
				</view>
				<slot>
					<text class="e-loading-page__warpper__text" :style="{
                            fontSize: addUnit(props.fontSize),
                            color: props.color,
                        }">{{ props.loadingText }}</text>
				</slot>
			</view>
		</view>
	</e-transition>
</template>

<script lang="ts">
	import {
		defineComponent
	} from 'vue'
	import mpMixin from "../../libs/mixin/mpMixin";
	/**
	 * loadingPage 加载动画
	 * @description 警此组件为一个小动画，目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。
	 * @tutorial https://www.uviewui.com/components/loading.html
	 * @property {String | Number}	loadingText		提示内容  (默认 '正在加载' )
	 * @property {String}			image			文字上方用于替换loading动画的图片
	 * @property {String}			loadingMode		加载动画的模式，circle-圆形，spinner-花朵形，semicircle-半圆形 （默认 'circle' ）
	 * @property {Boolean}			loading			是否加载中 （默认 false ）
	 * @property {String}			bgColor			背景色 （默认 '#ffffff' ）
	 * @property {String}			color			文字颜色 （默认 '#C8C8C8' ）
	 * @property {String | Number}	fontSize		文字大小 （默认 19 ）
	 * @property {String | Number}	iconSize		图标大小 （默认 28 ）
	 * @property {String}			loadingColor	加载中图标的颜色，只能rgb或者十六进制颜色值 （默认 '#C8C8C8' ）
	 * @property {Object}			customStyle		自定义样式
	 * @example <e-loading mode="circle"></e-loading>
	 */
	export default defineComponent({
		name: 'e-loading-page',
		mixins: [mpMixin]
	})
</script>

<script lang="ts" setup>
	import {
		toRefs
	} from 'vue'
	import {
		loadingPageProps
	} from './props';
	import {
		useDefaultProps
	} from '../../libs/hooks'
	import {
		addUnit
	} from '../../libs/utils/_utils'
	import componentsProps, {
		type DefaultProps
	} from "../../libs/config/componentsProps";

	const {
		loadingPage: loadingPageDefaultProps
	} = toRefs(componentsProps);

	const _props = defineProps(loadingPageProps)
	const props = useDefaultProps<DefaultProps['loadingPage']>(_props, loadingPageDefaultProps);
</script>

<style lang="scss" scoped>
	@import "../../libs/theme/loading-page.scss";
</style>